<template>
<div>
  <hr>
  <button @click="clickEventBus">Event bus change message</button>
  <app-header>
    <h2 slot="title">I am the slot title</h2>
    <p slot="title">I am the paragraph slot title</p>
  </app-header>
  <hr>
  <app-body></app-body>
  <hr>
  <form-one></form-one>
  <component is="form-one">和上面的效果是一样的</component>
  <component v-bind:is="component">和上面的效果是一样的，不过这种方式方便定义动态组件，只需要修改component的值即可</component>
  <button @click="component='form-one'">show form-one component</button>
  <button @click="component='footer-index'">show footer component</button>
  <hr>
  <footer-index></footer-index>
  <hr>
</div>
</template>

<script>
import Header from "./Header";
import Body from "./Body";
import Footer from "./Footer";
import FormOne from "./FormOne"
import {bus} from "../main";

let data = {
  list:  ['a','b'],
  message:'hello event bus',
  component: "form-one",
}

export default {
  name: "Index",
  components: {
    'app-header':Header,
    'app-body':Body,
    'footer-index':Footer,
    'form-one':FormOne,
  },
  data() {
    return data
  },
  methods:{
    clickEventBus:function (){
      this.message='event bus changed from index'
      bus.$emit('changeMessage',this.message)
    }
  }
}
</script>

<style scoped>

</style>
